<template>
	<view class="container">
		<h1 class="title">Register</h1>
		<view class="form-container">
			<uni-forms :modelValue="formData" :rules="rules" ref="formRef">
				<uni-forms-item label="Phone Number" name="tel">
					<uni-easyinput v-model="formData.tel" placeholder="Enter your phone number"
						placeholder-style="color: #ccc;" />
				</uni-forms-item>
				<uni-forms-item label="Password" name="password">
					<uni-easyinput type="password" v-model="formData.password" placeholder="Enter your password"
						placeholder-style="color: #ccc;" />
				</uni-forms-item>
				<view class="button-group">
					<button class="action-btn register-btn" @click="submit('register')"
						:disabled="loading">Register</button>
				</view>
			</uni-forms>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';

	const loading = ref(false);

	// 表单数据
	const formData = reactive({
		tel: '',
		password: '',
	});


	// 表单验证规则  
	const rules = {
		tel: {
			rules: [{
					required: true,
					errorMessage: 'Phone number cannot be empty'
				},
				{
					pattern: /^1[3-9]\d{9}$/,
					errorMessage: 'Please enter a valid phone number'
				},
			],
		},
		password: {
			rules: [{
				required: true,
				errorMessage: 'Password cannot be empty'
			}, ],
		},
	};

	// 表单引用  
	const formRef = ref(null);

	const submit = async (action) => {
		try {
			const res = await formRef.value.validate();
			console.log('Validation successful', res);
			// 校验通过后，根据 action 判断执行注册或登录  
			if (action === 'register') {
				await handleRegister();
			} else if (action === 'login') {
				await handleLogin();
			}
		} catch (err) {
			console.log('Validation failed', err);
			uni.showModal({
				title: 'Tip',
				content: 'validation failed',
				showCancel: false,
				confirmText: 'OK'
			});
		}
	};


	// 注册处理
	const handleRegister = async () => {
		loading.value = true;
		try {
			const res = await uni.request({
				url: 'https://maize.ltd/yumi/sign',
				method: 'POST',
				data: {
					phone: formData.tel,
					password: formData.password,
				},
			});
			console.log(res.data);
			if (res.data.code === 200) {
				uni.showModal({
					title: 'Tip',
					content: 'Registration successful',
					showCancel: false,
					confirmText: 'OK'
				});
				uni.navigateTo({
					url: '/pages/sign/sign'
				})
			} else if (res.data.msg === "该账号已注册") {
				uni.showModal({
					title: 'Tip',
					content: 'Already been registered',
					showCancel: false,
					confirmText: 'OK'
				});
			} else {
				uni.showModal({
					title: 'Tip',
					content: res.data.message || 'Registration failed',
					showCancel: false,
					confirmText: 'OK'
				});
			}
		} catch (error) {
			// Handle error  
		} finally {
			loading.value = false;
		}
	};
</script>


<style scoped lang="less">
	.container {
		position: relative;
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		/* 调整为顶部对齐 */
		align-items: center;
		background-color: #f0f0f0;
		color: #333;
		/* 标题颜色 */
	}

	.title {
		margin-top: 40px;
		margin-bottom: 40px;
		font-size: 28px;
		font-weight: bold;
		text-align: center;
		color: #333;
	}

	.form-container {
		width: 90%;
		max-width: 400px;
		padding: 20px;
		background-color: #fff;
		border-radius: 12px;
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
		color: #333;
		text-align: center;
	}

	.uni-forms-item {
		display: flex;
		align-items: center;
		/* 垂直居中 */
		margin-bottom: 12px;
		/* 缩小项之间的间距 */
		padding-left: 10px;
		/* 调整整个表单项的左边距 */
	}

	.uni-forms-item label {
		text-align: right;
		/* 文本右对齐 */
		font-size: 16px;
		color: #333;
	}

	.uni-easyinput {
		padding: 10px;
		font-size: 16px;
		color: #333;
	}


	.action-btn {
		height: 100rpx;
		width: 100%;
		padding: 5rpx;
		margin-top: 50rpx;
		margin-right: 10rpx;
		font-size: 30rpx;
		border: none;
		border-radius: 6rpx;
		cursor: pointer;
		transition: all 0.3s;
	}

	.register-btn {
		background-color: #28a745;
		color: #fff;
	}

	.register-btn:hover {
		background-color: #218838;
	}

	.login-btn {
		background-color: #007bff;
		color: #fff;
	}

	.login-btn:hover {
		background-color: #0056b3;
	}

	.footer {
		margin-top: 20rpx;
	}


	.footer-btn:hover {
		color: #0056b3;
	}
</style>